/* 精选推荐 */
import { useState, useEffect } from 'react'
// 导入精选推荐样式
import './../../css/selected.scss'
import template from '../../../../../public/muban.webp'
import { CameraOutlined, SunOutlined } from '@ant-design/icons';
import type { SearchProps } from 'antd/es/input/Search';
import chineseLunar from 'chinese-lunar';
import { Solar, Lunar } from 'lunar-javascript';
// 引入搜索input
import { Input, Select, Space } from 'antd';
const { Option } = Select;
const { Search } = Input;
const suffix = (
  <CameraOutlined
    style={{
      fontSize: 16,
      color: '#1677ff',
    }}
  />
);
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
const selectBefore = (
  <Select defaultValue="全部">
    <Option value="全部">全部</Option>
    <Option value="电子画册">H5</Option>
    <Option value="海报">海报</Option>
    <Option value="长页">长页</Option>
    <Option value="表单">表单</Option>
    <Option value="互动">互动</Option>
  </Select>
);
type Props = {}
function selectedHeader({ }: Props) {
  const placeholders = ['五一假期', '端午假期', '寒食节'];
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 计算下一个索引，确保在数组长度范围内循环
      const nextIndex = (index + 1) % placeholders.length;
      setIndex(nextIndex);
    }, 3000); // 每3秒切换一次
    // 清除 interval
    return () => clearInterval(interval);
  }, [index, placeholders.length]); // 添加placeholders.length到依赖数组

  //日历
  const [currentDate, setCurrentDate] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentDate(new Date());
    }, 1000 * 60 * 60 * 24);  // 每天更新一次（24小时 * 60分钟 * 60秒 * 1000毫秒）

    return () => clearInterval(interval);
  }, []);
  const formatChineseDate = (date: any) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekDay = weekDays[date.getDay()]; // 获取星期几的名称  
    return { year, month, day, weekDay };
  };

  const { year, month, day, weekDay } = formatChineseDate(currentDate);

  // 将公历日期转换为农历日期  
  // const lunarDate = chineseLunar.solarToLunar(currentDate);
  // 定义中文数字
  // const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  // 将数字转换为中文大写形式
  // function numberToChinese(num:any) {
  //     const numStr = num.toString();
  //     let chineseStr = '';
  //     for (let i = 0; i < numStr.length; i++) {
  //         chineseStr += chineseNumbers[parseInt(numStr[i])];
  //     }
  //     return chineseStr;
  // }
  // const lunarMonth = numberToChinese(lunarDate.month);
  // const lunarDay = numberToChinese(lunarDate.day - 1);

  var d = Lunar.fromDate(new Date());//获取农历日期
  let lunarMonth = d.getMonthInChinese();//获取中文 月
  let lunarDay = d.getDayInChinese();//获取中文 日
  // let week = d.getWeekInChinese();//获取中文 周

  let o = Solar.fromYmd(year, month, day);
  var l = o.getFestivals(); // 获取国内国际节日
  let [festivals, setFestivals] = useState('幸运日')
  useEffect(() => {
    for (var i = 0, j = l.length; i < j; i++) {
      if (l.length) {
        setFestivals(l[i])
      }
    }
  }, [])

  return (
    <div>
      <div className='selectedHeader'>
        <img src={template} width={250} height={70} alt="" />
        <div className='selectedSearch'>
          <Space direction="vertical">
            <Search
              addonBefore={selectBefore}
              placeholder={placeholders[index]}
              allowClear
              onSearch={onSearch}
              style={{ width: 580 }}
              suffix={suffix}
              enterButton
            />
          </Space>
          <ul className='selectedSearch_theme'>
            <li>邀请函</li>
            <li>公众号</li>
            <li>旅游</li>
            <li>绿色</li>
            <li>招聘</li>
            <li>招生</li>
            <li>科技</li>
          </ul>
        </div>
        <div className='selectedCalendar'>
          <div className="Calendar_left">
            <p><b><span style={{ fontSize: '24px' }}>{day} </span>  / <span>{month}  </span> <span>{year} </span> </b></p>
            <p> {weekDay}农历{lunarMonth}月{lunarDay}
            </p>
          </div>
          <div className="Calendar_right">
            <span><SunOutlined /></span>
            <span>{festivals} </span>
          </div>
        </div>
      </div>
    </div>
  )
}
export default selectedHeader